<style lang="scss" scoped>
@import '../../css/resource.scss';
.car-head{padding: 18px 24px;background: #fcfdff}
.pay-img-box{padding: 30px 0 40px 40px;background: #fff;}

.car-foot{background: #fff;margin-top: 12px;}
.all-money-box{float: right;padding: 16px 20px;}
.account-btn{float: right;color: #fff;padding: 16px 40px;background: $mco;font-size: 16px;cursor: pointer;}
.all-money{color:$mcm;font-weight: bold;font-size: 16px;}

.dialog-btn-center{width: 150px;background: $mco;}
.word-dialog-tap{text-align: center;color: #999;}
</style>

<template>
    <section class="buy-car">
        <el-row class="car-head">选择付款方式</el-row>
        <div class="pay-img-box">
            <el-radio-group v-model="payType">
                <el-radio :label="1"><img src="../../images/wechat-ic.png" alt=""></el-radio>
            </el-radio-group>
        </div>
        <div class="car-foot clearfix">
            <span class="account-btn" @click="payNow">立即付款</span>
            <div class="all-money-box">合计：<span class="all-money">￥{{allMoney}}</span></div>
        </div>
        <el-dialog
                title="请打开微信扫描支付二维码"
                :visible.sync="dialogLittle.centerDialogVisible"
                width="460px"
                center>
            <div class="word-dialog-tap">
                <div id="qr-box" style="height: 200px"></div>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button class="dialog-btn-center" type="primary" @click="dialogLittle.centerDialogVisible = false">知道了</el-button>
            </span>
        </el-dialog>
    </section>

</template>

<script>

import qs from 'qs'
import qrcode from '../../../static/qr/index.js'

export default{
    data: function(){
        return {
            orderID:this.$route.query.OID,
            payType:1,
            allMoney:this.$route.query.allCount,
            dialogLittle:{
                centerDialogVisible: false
            },
            path: [
                {
                    'name':'资源管理',
                    'path':'/resource/book-list'
                },

                {
                    'name': '支付页面'
                }
            ]
        }
    },
    methods: {
        createQR(url){      // 生成二维码
            var qrnode = new qrcode({
                render: 'canvas',
                correctLevel: 0,
                text: url,
                size: 200,
                background: '#fff',
                foreground: '#667766',
                pdground: '#52d2ff'
                //image : 'https://t.alipayobjects.com/images/rmsweb/T1ZsxhXdxbXXXXXXXX.png',
                //imageSize : 100
            });
            document.getElementById('qr-box').appendChild(qrnode);
        },
        payNow(){
            axios.post('/com/weixin/getNativeUrl', qs.stringify({
                orderID:this.orderID
            })).then((res) => {
                var d = res.data;
                if(d.flag == 1){
                    this.dialogLittle.centerDialogVisible = true;
                    this.$nextTick(()=>{
                        document.getElementById('qr-box').innerHTML='';
                        this.createQR(d.data.NativeUrl);
                    })
                }else {
                    this.$message.error(d.msg)
                }
            })
            //判断当前订单状态；如果已经支付则跳回上一页
            var goBackTimer = window.setInterval(()=>{
                if(this.$route.path=='/resource/resource-pay'&&this.dialogLittle.centerDialogVisible == true){
                    axios.post('/com/orders/getOrderStatus', qs.stringify({
                        orderID:this.orderID
                    })).then((res) => {
                        var d = res.data;
                        if(d.flag == 1){
                            if(d.data.OrderStatus==2){
                                history.go(-1)
                            }
                        }else {
                            this.$message.error(d.msg)
                        }
                    })
                }else {
                    window.clearInterval(goBackTimer)
                }
            },2000)
        }
    },
    mounted: function(){
        this.$store.commit('setPath', this.path)
    }
}


</script>
